<template>

  <div class="order">
    
    <ul class="tabTit">
      <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
    </ul>
    <div class="tabCon">
      <ul>
        <li class="list flex side_start" @click="toOrdering(itemCon.id)" v-for="(itemCon,index) in tabContent0" v-show="0 == num">
          <div class="list_l">
            <p>订单编号：{{itemCon.ordersn}}</p>
            <p>下单时间：{{itemCon.dateline}}</p>
            <p>预约时间：{{itemCon.meal_date}} {{itemCon.meal_time}}</p>            
          </div>
          <div class="list_r">
            {{itemCon.status_text}}
          </div>
        </li>
      </ul>
      <ul>
        <li class="list flex side_start" @click="toOrderCancel(itemCon.id)" v-for="(itemCon,index) in tabContent1" v-show="1 == num">
          <div class="list_l">
            <p>订单编号：{{itemCon.ordersn}}</p>
            <p>下单时间：{{itemCon.dateline}}</p>
            <p>预约时间：{{itemCon.meal_date}} {{itemCon.meal_time}}</p>           
          </div>
          <div class="list_r">
            已取消
          </div>
        </li>
      </ul>
      <ul>
        <li class="list flex side_center" @click="toOrderOver(itemCon.id)" v-for="(itemCon,index) in tabContent2" v-show="2 == num">
          <div class="list_l">
            <p>订单编号：{{itemCon.ordersn}}</p>
            <p>下单时间：{{itemCon.dateline}}</p>
            <p>预约时间：{{itemCon.meal_date}} {{itemCon.meal_time}}</p>           
          </div>
          <div class="list_r">
            <button>详情</button>
          </div>
        </li>
      </ul>
    </div>

  </div>
  
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'Order',
  data () {
    return {
      num: 0,
      tabs: ["进行中", "已取消","已完成"],
      tabContent0: [],
      tabContent1: [],
      tabContent2: [],
    }
  },
  mounted() {
    this.getInfoNow();
    this.getInfoCancel();
    this.getInfoOver();
    this.$root.share();
  },
  methods: {
    tab(index) {
        this.num = index;
    },
    toSearch() {
      this.$router.push({path:'/search'})
    },
    toActive() {
      this.$router.push({path:'/active'})
    },
    toOrdering(index){
      global.order_id = index;
      this.$router.push({
        name:'Ordering',
        // params: {
        //   orderId: index
        // }
      })
    },
    toOrderOver(index){
      global.order_id = index;
      this.$router.push({
        name:'OrderOver',
        // params: {
        //   orderId: index
        // }
      })
    },
    toOrderCancel(index){
      global.order_id = index;
      this.$router.push({
        name:'OrderCancel',
        // params: {
        //   orderId: index
        // }
    })
    },
    // 获取信息
    getInfoNow(index){
      var that = this;
      axios.get(global.api.order.customer.list,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          status: 0,
        }
      })
      .then(function(res){
        console.log("getInfoNow then");
        console.log(res);
        that.tabContent0 = res.data.list;
      })
      .catch(function(res){
        console.log("getInfoNow catch");
        console.log(res);
      }) 
    },
    getInfoCancel(index){
      var that = this;
      axios.get(global.api.order.customer.list,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          status: -1,
        }
      })
      .then(function(res){
        console.log("getInfoCancel then");
        console.log(res);
        that.tabContent1 = res.data.list;
      })
      .catch(function(res){
        console.log("getInfoCancel catch");
        console.log(res);
      }) 
    },
    getInfoOver(index){
      var that = this;
      axios.get(global.api.order.customer.list,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          status: 1,
        }
      })
      .then(function(res){
        console.log("getInfoOver then");
        console.log(res);
        that.tabContent2 = res.data.list;
      })
      .catch(function(res){
        console.log("getInfoOver catch");
        console.log(res);
      }) 
    },
  },
}
</script>

<style scoped>
  .order{
    width: 100%;
  }
  .tabTit{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    /*width: 100%;*/
    margin: 0.5rem 1rem;
    border: 1px solid #2ecc80;
    border-radius: 5px;
  }
  .tabTit li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 2rem;
    line-height: 2rem;
    /*color: #595757;*/
    color: #2ecc80;
  }
  .tabTit li:nth-child(2){
    border-left: 1px solid #2ecc80;
    border-right: 1px solid #2ecc80;
  }
  .tabTit .active{
    background-color: #2ecc80;
    color: #fff;
  }
  .list{
    width: 100%;
    margin: 0 auto;
    text-align: left;
    padding: 0.5rem 0;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .list_l{
    margin-left: 0.8rem;
  }
  .list p {
    margin: 0 auto;
    /*height: 1.8rem;*/
    line-height: 1.8rem;
    font-size: 0.9rem;
  }
  .list_r{
    margin: 0.4rem 0.8rem 0 0;
    padding-left: 0.5rem;
    font-size: 0.9rem;
    color: #2ecc80;
    line-height: 1rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: right;
    padding-left: 
  }
  .list_r button {
    border: none;
    background-color: #2ecc80;
    color: #fff;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
  }
</style>
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_start{
    justify-content: space-between;
    align-items: flex-start;
  }
  .side_center{
    justify-content: space-between;
    align-items: center;
  }
</style>
